import React, { Component, Suspense } from 'react';
import {Route,Switch,Redirect} from 'react-router-dom'


interface Props {
    routes:any[]
}
class RouterView extends Component <Props> {
    render() {
        return (
            <Suspense fallback={<div className='loading' > <img src='' alt="" /> 加载中...</div>}>
                <Switch >
                    {/* 动态生成路由规则 */}
                    {
                        this.props.routes.map((item,index)=>{
                            return (
                                item.from ?
                                // 判断一级路由下是否有嵌套路由
                                <Redirect exact from={item.from} to={item.to} key={index}/> :
                                // 如果没有就精确匹配到重定向
                                <Route key={index} path={item.path} render={(props)=>{
                                // 有的话就通过routes的路由地址，配置到props中
                                    if(item.children){ 
                                        return  <item.component {...props} routes={item.children} />
                                    }else{
                                        return  <item.component {...props} />
                                    }
                                    //由于当前路由下有嵌套路由,将嵌套路由的路由规则通过routes属性传到item.component这个组件中
                                    //为了防止路由匹配成功时渲染出来的组件丢失history,location,match, 需要将props展开通过属性的方式传入组件.
                                }} />
                            )
                        })
                    }
                </Switch>
            </Suspense>
        );
    }
}

export default RouterView;